import React, {render, Component} from './react'

const root = document.querySelector("#root")

const jsx = (
  <div>
    <p>Hello Fiber</p>
    <p>Hello Sibling</p>
  </div>
)


// render(jsx, root)

const newJsx = (
  <div>
    <h3>阿里</h3>
  </div>
)

// setTimeout(() => {
//   render(newJsx, root)
// }, 2000)


class Greeting extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: "张三"
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    this.setState({
      name: "李四"
    })
  }
  render() {
    return <div>Hello {this.state.name}
      <button onClick={this.handleClick}>click</button>
    </div>
  }
}

render(<Greeting />, root)

function FnComp(props) {
  return <h1>{props.title}</h1>
}

// render(<FnComp title="zheshi props" />, root)